<template>
  <div id="top3">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div id="top_3_1" style="width:100%;height:500px">
          <div class="tableBox">
            <el-table :data="tableData" height="220" border style="width: 100%">
              <el-table-column prop="one" label="标签" width="120"></el-table-column>
              <el-table-column prop="two" label="机器" width="65"></el-table-column>
              <el-table-column prop="three" label="标签" width="130"></el-table-column>
              <el-table-column prop="four" label="人类" width="73"></el-table-column>
            </el-table>
            <el-table :data="tableData2" height="243" border style="width: 100%">
              <el-table-column prop="one" label="标签" width="120"></el-table-column>
              <el-table-column prop="two" label="机器" width="65"></el-table-column>
              <el-table-column prop="three" label="标签" width="130"></el-table-column>
              <el-table-column prop="four" label="人类" width="73"></el-table-column>
            </el-table>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div id="top_3_2" style="width:100%;height:520px">
          <div class="tableBox">
            <el-table :data="tableData3" height="225" border style="width: 100%">
              <el-table-column prop="one" label="机器人推文中@的用户(top5)" width="230"></el-table-column>
              <el-table-column prop="two" label="出现总共次数"></el-table-column>
            </el-table>
            <el-table :data="tableData4" height="225" border style="width: 100%">
              <el-table-column prop="one" label="人类推文中@的用户(top5)" width="230"></el-table-column>
              <el-table-column prop="two" label="出现总共次数"></el-table-column>
            </el-table>
          </div>
        </div>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
  </div>


  
</template>

  <script>
export default {
  data() {
    return {
      swiperOptions:{
         autoplay:true, 
      },
      tableData: [
        {
          one: "@YouTube",
          two: "415",
          three: "@YouTube",
          four: "1185"
        },
        {
          one: "@Change",
          two: "171",
          three: "@Change",
          four: "299"
        },
        {
          one: "@ntdchinese",
          two: "15",
          three: "@tos",
          four: "80"
        },
        {
          one: "@news",
          two: "7",
          three: "@SolomonYue",
          four: "42"
        },
        {
          one: "@CdnChange",
          two: "3",
          three: "@Gnews202064",
          four: "38"
        }
      ],
      tableData2: [
        {
          one: "#香港",
          two: "251",
          three: "#香港",
          four: "800"
        },
        {
          one: "#Hongkong",
          two: "148",
          three: "#Hongkong",
          four: "333"
        },
        {
          one: "#區議㑹",
          two: "57",
          three: "#區議㑹",
          four: "280"
        },
        {
          one: "#HongkongProtest",
          two: "51",
          three: "#区议会",
          four: "174"
        },
        {
          one: "#StandWithHongKong",
          two: "42",
          three: "#蘋果",
          four: "132"
        },
        {
          one: "#HK",
          two: "39",
          three: "#區議㑹選",
          four: "123"
        },
        {
          one: "#病毒",
          two: "37",
          three: "#蘋果日報",
          four: "122"
        },
        {
          one: "#Hongkongprotests",
          two: "31",
          three: "#StandWithHong",
          four: "122"
        },
        {
          one: "#ccp",
          two: "29",
          three: "#议会",
          four: "107"
        },
        {
          one: "#區議員",
          two: "27",
          three: "#香港人",
          four: "101"
        }
      ],
      tableData3: [
      {
          one:"@YouTube",
          DevName:"414"
      },
      {
          one:"@Change",
          DevName:"171"
      },
      {
          one:"@ntdchinese",
          DevName:"15"
      },
      
      {
          one:"@news",
          DevName:"7"
      },
      
      {
          one:"@hongkongfp",
          DevName:"4"
      }
      ],
      tableData4: [
      {
          one:"@YouTube",
          DevName:"1172"
      },
      {
          one:"@Change",
          DevName:"294"
      },
      {
          one:"@tos",
          DevName:"80"
      },
      {
          one:"@SolomonYue",
          DevName:"42"
      },
      
      
      {
          one:"@Gnews202064",
          DevName:"38"
      }
      ]
    };
  },
  methods: {
            sortDevName(str1, str2) {
              let res = 0
              for (let i = 0; ;i++) {
				if (!str1[i] || !str2[i]) {
				  res = str1.length - str2.length
				  break
				}
				const char1 = str1[i]
				const char1Type = this.getChartType(char1)
				const char2 = str2[i]
				const char2Type = this.getChartType(char2)
				// 类型相同的逐个比较字符
				if (char1Type[0] === char2Type[0]) {
				  if (char1 === char2) {
					continue
				  } else {
					if (char1Type[0] === 'zh') {
					  res = char1.localeCompare(char2)
					} else if (char1Type[0] === 'en') {
					  res = char1.charCodeAt(0) - char2.charCodeAt(0)
					} else {
					  res = char1 - char2
					}
					break
				  }
				} else {
				// 类型不同的，直接用返回的数字相减
				  res = char1Type[1] - char2Type[1]
				  break
				}
			  }
			  return res
			},
			getChartType(char) {
			// 数字可按照排序的要求进行自定义，我这边产品的要求是
			// 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
			  if (/^[\u4e00-\u9fa5]$/.test(char)) {
				return ['zh', 300]
			  }
			  if (/^[a-zA-Z]$/.test(char)) {
				return ['en', 200]
			  }
			  if (/^[0-9]$/.test(char)) {
				return ['number', 100]
			  }
			  return ['others', 999]
			}
        }
};
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 506px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #2e374400;
  
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #f4f9ff00;
  
}
#top3 {
  height: calc(100% - 40px);
  .swiper-container {
    height: 100%;
  }
}
</style>
  <style  >
.tableBox {
  height: calc(100% - 200px);
}
.table1 {
  height: 76%;
}
.tableBox .el-table {
  height: 100%;
  color: rgb(195, 196, 163);
  background-color: rgba(10, 10, 10, 0.1);
}
.tableBox .el-table td {
  padding: 5px 0;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #0f0f0f83;
}
.tableBox .el-table th,
.tableBox .el-table tr {
  background-color: unset;
}
.el-carousel__container {
  height: 520px;
}
</style>
